<template>
	<div class="cmt-container">
		<h3>发表评论</h3>
		<hr />
		<textarea placeholder="请输入要发表的内容，最多吐槽120字" maxlength="120"
			v-model="msg"></textarea>
			 <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
			 <div class="cmt-list">
			 	<div class="cmt-item" v-for="(item,i) in comments" :key="item.add_time">
			 		<div class="cmt-title">
			 			第{{i+1}}楼&nbsp;&nbsp;{{item.user_name}}：匿名用户&nbsp;&nbsp;
			 			发表时间：{{item.add_time | dateFormat}}
			 		</div>
			 		<div class="cmt-body">
			 			{{item.content == 'undefined'? '此用户很懒，啥都咩说':item.content}}
			 		</div>
			 	</div>
			 </div>
			 <!--
			 <div class="cmt-list">
			 	<div class="cmt-item">
			 		<div class="cmt-title">
			 			第一楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;
			 			发表时间：2012-12-12 12:12:12
			 		</div>
			 		<div class="cmt-body">
			 			1233232234
			 		</div>
			 	</div>
			 </div>
			 <div class="cmt-list">
			 	<div class="cmt-item">
			 		<div class="cmt-title">
			 			第一楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;
			 			发表时间：2012-12-12 12:12:12
			 		</div>
			 		<div class="cmt-body">
			 			1233232234
			 		</div>
			 	</div>
			 </div>
			 <div class="cmt-list">
			 	<div class="cmt-item">
			 		<div class="cmt-title">
			 			第一楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;
			 			发表时间：2012-12-12 12:12:12
			 		</div>
			 		<div class="cmt-body">
			 			1233232234
			 		</div>
			 	</div>
			 </div>
			 <div class="cmt-list">
			 	<div class="cmt-item">
			 		<div class="cmt-title">
			 			第一楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;
			 			发表时间：2012-12-12 12:12:12
			 		</div>
			 		<div class="cmt-body">
			 			1233232234
			 		</div>
			 	</div>
			 </div>
			 <div class="cmt-list">
			 	<div class="cmt-item">
			 		<div class="cmt-title">
			 			第一楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;
			 			发表时间：2012-12-12 12:12:12
			 		</div>
			 		<div class="cmt-body">
			 			1233232234
			 		</div>
			 	</div>
			 </div>
			 <div class="cmt-list">
			 	<div class="cmt-item">
			 		<div class="cmt-title">
			 			第一楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;
			 			发表时间：2012-12-12 12:12:12
			 		</div>
			 		<div class="cmt-body">
			 			1233232234
			 		</div>
			 	</div>
			 </div>   -->
			 <mt-button type="danger" size="large" plain @click ='getMore'>加载更多</mt-button>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	export default {  
		data(){
			return {
				pageIndex:1, //默认展示第一页
				comments:[],  //所有的评论数据
				msg:"",  //评论的内容
			}
		},
		created(){
			this.getComments();
		},
		methods:{
			getComments(){  //获取评论。。。
//				console.log('this.pageInex',this.pageIndex)
				this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageIndex)
				.then(result => {
					if(result.body.status === 0){
						console.log('获取评论成功');
//						this.comments = result.body.message;
//每当获取新的新评论数据的时候，不要把老数据清空覆盖，而是拼接
//						console.log('result.body.message',result.body.message)
						if(result.body.message.length == 0){
							console.log('没有更多评论啦')
						}
						this.comments = this.comments.concat(result.body.message);
//						console.log('this.comments',this.comments)
					}else{
						Toast('获取评论失败');
					}
				})
			},
			getMore(){  //加载更多
				this.pageIndex++;
				console.log('this.pageIndex++',this.pageIndex)
				this.getComments();
			},
			postComment(){				
				//校验内容是否为空
				if(this.msg.trim().length ===0){
					return Toast("评论内容不能为空！")
				}		
				console.log(11)
				//发表评论
				//参数1  请求的URL地址
				//参数2 提交给服务器的数据对象  {comment:this.msg}
				//参数3 定义提交时候，表单中数据的格式  {emulateJSON:true}
				this.$http.post('api/postcomment/'+this.$route.params.id,{content:this.msg.trim()})
				.then(function(result){
					if(result.body.status == 0){
						//评论成功
						//1.拼接处一个评论对象
						var cmt = {
							user_name:"匿名用户",
							add_time:Date.now(),
							content:this.msg.trim()
						};
						this.comments.unshift(cmt);
						console.log(this.comments)
						this.msg = ""
						
					}
				})
			}
		},
		
		props:['id']
	}
</script>

<style lang="scss" scoped>
.cmt-container{
	h3{
		font-size: 18px;
	}
	textarea{
		font-size: 14px;
		height: 85px;
		margin: 0;
	}
	.cmt-list{
		margin: 5px 0;
		.cmt-item{
			font-size: 13px;
			.cmt-title{
				background-color: #CCCCCC;
				line-height: 30px;
			}
			.cmt-body {
				line-height: 35px;
				text-indent: 2em;
			}
		}
	}
}
</style>